<template>
	<view class="liuyan_box">
		<view class="tishi_box">
			<view style="color: #FFAE2A;margin-top:20rpx;">温馨提示：</view>
			<view>
				<view class="tishi_box_two">1.提交留言后，我们将尽快与您联系!</view>
				<view class="tishi_box_two two">
					2.每人最多可留言1次，请仔细核对输入内容!
				</view>
			</view>
		</view>
		<view class="section_box">
			<view class="section_box_item">
				<view class="section_box_text">
					<text>*</text>姓名
				</view>
				<input type="text" placeholder="请输入姓名" v-model="lyname" class="input" style="color:#fff;"/>
			</view>
			<view class="section_box_item">
				<view class="section_box_text">
					<text>*</text>手机号
				</view>
				<input type="number" placeholder="请输入手机号" v-model="lyphone" class="input"  style="color:#fff;"/>
			</view>
			<view class="contents">
				<view class="beizhu">
					备注
				</view>
				<textarea type="text" placeholder="请输入文字" v-model="lycontent"  style="color:#fff;"/>
				<view class="contents_num">{{ lycontent.length }}/200</view>
			</view>
		</view>
		<view class="liuyan_btn allbtn flexs" @click="liuyanSubmit">
			确定
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lyname: "",
			lyphone: "",
			lycontent: "",
		}
	},
	methods: {
		liuyanSubmit() {
			if (this.lyname == '') {
				uni.showToast({
					title: "请输入姓名",
					icon: "none"
				})
				return
			}
			if (this.lyphone == '') {
				uni.showToast({
					title: "请输入手机号",
					icon: "none"
				})
				return
			}
			if (this.lycontent == '') {
				uni.showToast({
					title: "请输入备注",
					icon: "none"
				})
				return
			}
			let data = {
				name: this.lyname,
				phone: this.lyphone,
				content: this.lycontent
			}
			this.$Request.post(this.$api.user.cooperation, data).then(res => {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				uni.navigateBack()
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.liuyan_box {
	width: 100vw;
	height: 100vh;
	background: #262626;


	.liuyan_btn {
		width: 710rpx;
		height: 96rpx;
		position: fixed;
		bottom: 45rpx;
		left: 20rpx;
		background: rgba(255, 231, 192, 0.1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx solid #FED187;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 44rpx;
		margin: 0 auto;
	}

	.tishi_box {
		width: 100%;
		padding: 20rpx 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		background: #262626;
		display: flex;


		.tishi_box_two {
			color: #fff;
			margin: 20rpx 0;
		}

		.two {
			// width: 595rpx;
			margin: 20rpx 0;
			text-align: left;
		}
	}

	.section_box {
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;

		.section_box_item {
			width: 70vw;
			font-size: 26rpx;
			font-weight: 500;
			color: #fff;


			.section_box_text {
				font-size: 32rpx;
				font-weight: 500;
				margin: 30rpx 0;

				text {
					color: #E32F11;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 670rpx;
				height: 80rpx;
				background: rgba(255, 231, 192, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 1rpx solid #FED187;
				border-radius: 4rpx;
				padding-left: 20rpx;
				// box-sizing: border-box;
			}
		}


		.contents {
			position: relative;

			textarea {
				width: 670rpx;
				height: 248rpx;
				background: rgba(255, 231, 192, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				border: 1rpx solid #FED187;
				border-radius: 4rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.beizhu {
				box-sizing: border-box;
				margin: 30rpx 0;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
			}

			.contents_num {
				position: absolute;
				right: 18rpx;
				bottom: 22rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #fff;
			}
		}


	}
}
</style>
